<template>
	<view>
		<!-- <u-navbar @leftClick="leftClick" leftText="返回" :title="data.title" placeholder fixed>
		</u-navbar> -->
		<u-navbar :title="data.title" placeholder fixed>
			<view class="navbar-left-text" slot="left">
				<view v-if="!isShowBackHome"  @click="leftClick" class="">返回</view>
			</view>
			<view class="navbar-left-text" slot="left">
				<uni-icons v-if="isShowBackHome" type="home-filled" size="24" style="margin-left: 10rpx;" @click="goHome"></uni-icons>
			</view>
		</u-navbar>
		
		<view class="head-title"> <text user-select>{{data.title}}</text> </view>
		<view class="tou-box">
			<view class="price">
				<text>{{data.salary}}</text>
			</view>
			<view class="browse">{{data.updatetime}}</view>
		</view>

		<view class="position-title">职位描述</view>
		<view class="content">
			{{data.description}}
		</view>

		<view class="company-box">
			<view class="company">
				<view class="company-l">
					<!-- <image src="../../static/wx.png" mode=""></image> -->
					<view class="text">{{data.company}}</view>
				</view>
				<!-- <image src="../../static/below.png" mode=""></image> -->
			</view>
			<view class="wire"></view>
			
			<view class="content-text"> <text>公司地址：{{data.county}}{{data.address || ''}}</text> 
			</view>
			<view class="content-text" v-if="data.introduce"> <text>公司介绍：</text> {{data.introduce}}</view>
		</view>
		
		<view class="covers" v-if="data.video && token">
			<video class="cover" :src="oss(data.video)"></video>
			<view class="overlay" v-if="data.switch != 1">该用户暂无开通视频功能</view>
		</view>
		
		<view class="fixation">
			<!-- <invite></invite> -->
		</view>
		<invite></invite>
		
		<view class="" style="margin-top: 62rpx;"></view>
		<!-- <u-divider text="为你推荐"></u-divider> -->
		<view class="" style="text-align: center;font-size: 32rpx;font-weight: 800;">
			为你推荐
		</view>
		<view class="list-box">
			<view class="each-box" v-for="i in recruitList" @click="todetail(i.id)">
				<view class="title-box">
					<view class="title">
						<text v-if="i.switch">置顶</text>
						{{i.title}}
						<image v-if="i.video" style="width: 38rpx;height: 38rpx;vertical-align: middle;padding-left: 5rpx;" src="../../static/video.png" mode=""></image>
					</view>
					<view class="price">{{i.salary}}</view>
				</view>
				<view class="name-box">
					<view class="name">
						{{i.company}}
					</view>
					<view class="time">{{i.updatetime}}</view>
				</view>
			</view>
			<u-loadmore :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" />
		</view>
		

		<view class="bottom-box">
			<view class="name">{{data.name}}</view>
			<view class="" style="display: flex;">
				<view class="relation-btn" @click="playPinnedShow">帮他置顶</view>
				<view class="relation-btn" style="margin-left: 24rpx;" @click="IdlePurchase">求购求租</view>
				<view class="relation-btn" style="margin-left: 24rpx;" @click="relation">电话联系</view>
			</view>
		</view>
		<!-- 置顶弹窗 -->
		<TopPopup :ispublish="0" :show1="pinnedShow" :meal="meal" @padlock="padlock" @ckeck="ckeck"></TopPopup>

		<view class="cotton"></view>
		
		<u-popup :show="show" mode="center" round="10" @close="show = false">
			<view class="join-box">
				<view class="pop-title">当前积分不足，无法拨打电话</view>
				
				<view class="btn-box">
					<view class="qx-btn" @click="show = false">取消</view>
					<view class="qd-btn" @click="tointegral">赚取积分</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="show2" mode="center" round="10" @close="show2 = false">
			<view class="join-box">
				<view class="pop-title">消耗{{data.score}}积分，立即拨打对方电话</view>
				
				<view class="btn-box">
					<view class="qx-btn" @click="show2 = false">取消</view>
					<view class="qd-btn" @click="deduct">拨打</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 一键分享 -->
		<!-- <view class="share">
		    <u-button id="shareBtn" open-type="share">分享</u-button>
		</view> -->
		
		<view class="share-box">
			<button class="iconfont icon-yaoqing" style="width: 110rpx;height: 110rpx;z-index: 99;" open-type="share"></button>
			<image class="fenx-img" src="../../static/fenx.png" mode=""></image>
		</view>
		<text class="fenxiang">分享</text>
	</view>
</template>

<script>
	import invite from "@/components/invite.vue"
	import TopPopup from "@/components/topPopup.vue"
export default {
	components: {
		invite,TopPopup
	},
	data() {
		return {
			id:'',
			data:'',
			score:'',
			show:false,
			show2:false,
			
			status: 'loadmore',
			flag: false,
			recruitList:[],
			page:1,
			isShowBackHome:false,
			pinnedShow:false,//置顶弹窗
			paytype:2,
			meal:[],
			myMoney:0,
			token:''
		};
	},
	onLoad(op) {
		this.id = op.id
		this.getdetail()
		
		let pages = getCurrentPages()
		if(pages.length === 1){
			this.isShowBackHome = true
		}
		if(uni.getStorageSync('token')){
			this.getcombo()
			this.getMoney()
		}
		// #ifdef MP-WEIXIN
		this.paytype = 2
		// #endif
		// #ifdef APP
		this.paytype = 1
		// #endif
		
		var timestamp = new Date().getTime();
		console.log(timestamp,'timestamp')
		if(timestamp > 1724151381000) {
			this.token = 1
		}
	},
	onShareTimeline(){
	    return{
	      title:this.data.title,  //分享的标题
	      query: {
			  id:this.id
		  },     //点击分享链接之后进入的页面路径
	      imageUrl:'', // 设置分享卡片图片
	    }
	},
	onReachBottom() {
		console.log('````````````')
		//避免多次触发
		if (this.status == 'loading' || this.status == 'nomore') {
			return;
		}
		this.status = 'loading';
		this.getRecruit()
	},
	methods: {
		playPinnedShow(){
			if(!uni.getStorageSync('token')){
				uni.$u.route({
					url: 'pagesA/auth/login'
				})
				return
			}
			this.pinnedShow = true
		},
		getMoney(){
			uni.$u.http.post('/getmoney ').then(res => {
				if (res.code === 1) {
					this.myMoney = res.data
				}
			}).catch((res) => {
				
			})
		},
		ckeck(e) {
			if(!e.id) return this.toast('请选择置顶套餐')
			if(this.myMoney < e.money){
				//余额不足 微信支付
				uni.$u.http.post('/meallist', {
					type:5,
					order_id:this.id,
					id:e.id,
					paytype:this.paytype
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						let that = this
						uni.requestPayment({
							appId: res.data.pay.appId,
							nonceStr: res.data.pay.nonceStr,
							package: res.data.pay.package,
							paySign: res.data.pay.paySign,
							signType: res.data.pay.signType,
							timeStamp: res.data.pay.timeStamp,
							success: (e) => {
								that.toast(res.msg)
								that.pinnedShow = false
							},
							fail: (e) => {
								that.$u.toast('支付失败');
							}
						})
					}
				}).catch((res) => {
						
				})
			}else {
				//余额支付
				uni.$u.http.post('/meallist', {
					type:5,
					order_id:this.id,
					id:e.id,
					paytype:4
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.toast(res.msg)
						this.pinnedShow = false
					}
				}).catch((res) => {
						
				})
			}
		},
		// 取消置顶
		padlock(){
			this.pinnedShow = false
		},
		//置顶套餐
		getcombo() {
			uni.$u.http.post('/meallist',{
				mealtype:4
			}).then(res => {
				if (res.code == 1) {
					this.meal = res.data
				}
			}).catch((res) => {
			})
		},
		
		goHome(){
			uni.switchTab({
				url:'/pages/index/index'
			})
		},
		IdlePurchase(){
			uni.navigateTo({
				url:'/pagesA/index/upload?type=1'
			})
		},
		todetail(id){
			uni.redirectTo({
				url:'/pages/forum/newDetail?id=' + id
			})
		},
		getRecruit(){
			this.flag = false
			this.status = 'loading';
			uni.$u.http.post('/recruit/getList',{
				page:this.page,
				search:'',
			}).then(res => {
				if (res.code == 1) {
					this.recruitList = this.recruitList.concat(res.data)
					
					if (res.data.length === 0) {
						this.status = 'nomore';
					} else {
						this.page++
						this.status = 'loadmore';
					}
					this.flag = true
					uni.stopPullDownRefresh();
				}
			}).catch((res) => {
			
			})
		},
		leftClick(){
			uni.navigateBack()
		},
		dial() {
			uni.$u.http.post('/mobilelog',{
				mobile:this.data.mobile
			}).then(res => {
				if (res.code == 1) {
					uni.makePhoneCall({
						phoneNumber: this.data.mobile
					});
				}
			}).catch((res) => {
			
			})
		},
		deduct(){
			uni.$u.http.post('/index/phone',{
				id:this.id,
				type:'recruit'
			}).then(res => {
				if (res.code == 1) {
					this.show2 = false
					this.dial()
					this.getdetail()
				}
			}).catch((res) => {
				this.show2 = false
				this.show = true
				console.log(res)
			})
		},
		//联系
		relation(){
			// if(!uni.getStorageSync('token')){
			// 	uni.$u.route({
			// 		url: 'pagesA/auth/login'
			// 	})
			// 	return
			// }
			if(this.data.is_phone){
				this.dial()
			} else {
				if(this.data.score == 0){
					this.dial()
				} else {
					this.show2 = true
				}
			}
		},
		//赚取积分
		tointegral(){
			uni.redirectTo({
				url: '/pages/my/renWu/jiFen'
			});
		},
		getdetail(){
			uni.$u.http.post('/recruit/getDetail',{
				id:this.id
			}).then(res => {
				if (res.code == 1) {
					this.data = res.data
					uni.setNavigationBarTitle({
						title:this.data.title
					});
				}
			}).catch((res) => {
			
			})
		}
	}
}

</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
.tou-box {
	display: flex;
	justify-content: space-between;
	padding: 40rpx 32rpx 0 32rpx;
	align-items: center;

	.price {
		font-size: 28rpx;
		font-weight: 800;
		color: #fa6759;
		text {
			font-size: 56rpx;
		}
	}
	.browse {
		font-size: 28rpx;
		color: #999999;
		font-weight: 500;
	}
}
.head-title {
	padding: 16rpx 32rpx 0 32rpx;
	font-size: 38rpx;
	font-weight: bold;
	color: #333333;
	line-height: 45rpx;
}

.position-title {
	font-size: 32rpx;
	margin-top: 78rpx;
	padding-left: 32rpx;
	font-weight: bold;
	color: #333333;
}

.content {
	padding: 24rpx 32rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #666666;
	line-height: 46rpx;
}

.covers{
	width: 686rpx;
	height: 420rpx;
	position: relative;
	margin: auto;
	margin-top: 32rpx;
			padding: 20rpx 0;
			.cover{
				width: 100%;
			}
			.overlay {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 420rpx;
			  backdrop-filter: blur(10px); /* 添加模糊效果 */
			  text-align: center;
			  line-height: 400rpx;
			  font-size: 24rpx;
			  color: #FEBF4E;
			}
		}
		
.company-box {
	width: 622rpx;
	padding: 32rpx;
	margin: auto;
	background: #f6f6f6;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	opacity: 1;

	.company {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.company-l {
			display: flex;
			align-items: center;
			image {
				width: 96rpx;
				height: 96rpx;
				background: #d9d9d9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
			}
			.text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-left: 24rpx;
				width: 340rpx;
			}
		}
		image {
			width: 22rpx;
			height: 22rpx;
		}
	}
	.wire {
		width: 622rpx;
		height: 0rpx;
		opacity: 0.16;
		border: 1rpx solid #999999;
		margin: auto;
		margin-top: 32rpx;
	}
	
	.content-text {
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 24rpx;
		line-height: 46rpx;
		
		text {
			color: #FEBF4E;
		}
	}
}

.group-box {
	width: 622rpx;
	height: 95rpx;
	padding: 32rpx;
	background: #fff9ee;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto;
	margin-top: 32rpx;

	.group-l {
		display: flex;

		image {
			width: 95rpx;
			height: 95rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
		}
		.group-title {
			margin-left: 24rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
			.name {
				font-size: 24rpx;
				margin-top: 16rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}
	image {
		width: 18rpx;
		height: 28rpx;
	}
}

.fixation {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 9;
	}

.bottom-box {
	position: fixed;
	bottom: 0;
	width: 686rpx;
	height: 98rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	display: flex;
	justify-content: space-between;
	padding: 0 32rpx;
	align-items: center;
	z-index: 99;
	.relation-btn {
		width: 184rpx;
		height: 74rpx;
		background: #febf4e;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		opacity: 1;
		font-size: 26rpx;
		text-align: center;
		line-height: 74rpx;
		font-weight: 500;
		color: #333333;
	}
	.name {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #333;
	}
}
.cotton {
	height: 240rpx;
}

.join-box {
		width: 560rpx;
		height: 278rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		
		.pop-title {
			padding-top: 60rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		
		.btn-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 60rpx;
			padding: 0 24rpx;
			.qx-btn {
				width: 236rpx;
				height: 80rpx;
				background: #F6F6F6;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				opacity: 1;
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				line-height: 80rpx;
				text-align: center;
			}
			.qd-btn {
				width: 236rpx;
				height: 80rpx;
				background: #FEBF4E;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				opacity: 1;
				line-height: 80rpx;
				text-align: center;
				color: #333;
			}
		}
	}
	
	
	.share {
				background-color: #FEBF4E;
				color: #333;
				border-radius: 50%;
				position: fixed;
				bottom: 300rpx;
				right: 29rpx;
				z-index: 9;
				#shareBtn {
					background-color: #FEBF4E;
					color: #333;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
			// /deep/ .u-button--info.data-v-2bf0e569 {
			// 	background-color: #FEBF4E !important;
			// 	border-style: none;
			// }
			
			.fenxiang {
					font-size: 24rpx;
					position: fixed;
					bottom: 45%;
					right: 50rpx;
					z-index: 9;
				}
			.share-box {
				position: fixed;
				bottom: 40%;
				right: 29rpx;
				z-index: 9;
				
				.fenx-img {
					width: 100rpx;
					height: 100rpx;
					position: relative;
					top: -100rpx;
				}
			}
			/* button自带样式清除 */
			.share-box button::after {
			  border: none !important;
			  padding: 0 !important;
			  margin: 0 !important;
			}
			
			.share-box button {
			  background-color: transparent !important;
			  padding: 0 !important;
			  line-height: inherit !important;
			  margin: 0 !important;
			  width: auto !important;
			  font-weight: 500 !important;
			  border-radius: none !important;
			}
			
			
			
			
			.list-box {
				.each-box {
					width: 622rpx;
					background-color: #FFFFFF;
					border-radius: 24rpx;
					padding: 32rpx;
					margin: auto;
					margin-top: 24rpx;
					.title-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
							text {
								width: 58rpx;
								height: 34rpx;
								background: #FEBF4E;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								opacity: 1;
								font-size: 24rpx;
								text-align: center;
								line-height: 34rpx;
								font-weight: 500;
								color: #333333;
								margin-right: 10rpx;
							}
						}
						.price {
							font-size: 30rpx;
							font-weight: 800;
							color: #FA6759;
						}
					}
					.name-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 32rpx;
						.name {
							font-size: 26rpx;
							font-weight: 500;
							color: #666666;
							image {
								width: 34rpx;
								height: 34rpx;
								border-radius: 50%;
								opacity: 1;
								vertical-align: middle;
								margin-right: 16rpx;
							}
						}
						.time {
							font-size: 22rpx;
							font-weight: 500;
							color: #999999;
						}
					}
				}
			}
</style>
